{extends file="assets::smarty-templates::Master"|ToPath}
{block name=content}


<form action="{$action}" method="post" class="form-validate" >
    <fieldset>
        <label>Informaci&oacute;n del Estudiante</label>
        <dl>
            <label>Codigo del Estudiante</label>
            <div><input type="text" name="codigoEstudiante" class="small" value="{$estudiante->getCodigoEstudiante()}" readonly="readonly" /></div>
        </dl>
        <dl>
            <label>Nombre del Estudiante</label>
            <div><input type="text" name="nombreEstudiante" class="medium" value="{$estudiante->getEstudiante()->getNombres()} {$estudiante->getEstudiante()->getApellidos()}" readonly="readonly" /></div>
        </dl>
        <dl>
            <label>Empresa</label>
            <div><input type="text" name="nombreEmpresa" class="medium" value="{$empresa}" readonly="readonly" /></div>
        </dl>
        <dl>
            <label>Mes</label>
            <div>
                <select name="mes">
                    <option value="1">Enero</option>
                    <option value="2">Febrero</option>
                    <option value="3">Marzo</option>
                    <option value="4">Abril</option>
                    <option value="5">Mayo</option>
                    <option value="6">Junio</option>
                    <option value="7">Julio</option>
                    <option value="8">Agosto</option>
                    <option value="9">Septiembre</option>
                    <option value="10">Octubre</option>
                    <option value="11">Noviembre</option>
                    <option value="12">Diciembre</option>
                </select>
            </div>
        </dl>
        <dl>
            <label>Semana</label>
            <div>
                <input name="semana" class="small number" size="2" type="text" max="100" min="1" />

            </div>
        </dl>
    </fieldset>
    <fieldset>
        <table>
            <thead>
                <tr >
                    <th style="vertical-align: middle;">Actividades Desarrolladas</th>
                    <th style="vertical-align: middle;">Objetivo General Propuesto</th>
                    <th>% Logro/Cumplimiento</th>
                    <th></th>
                </tr>
            </thead>
            <tbody id="fila">
                <tr id="new0">
                    <td><textarea style="width: 95%;" name="actividades[0][actividad]" id="act-new0" class="required" ></textarea></td>
                    <td><textarea style="width: 95%;" name="actividades[0][objetivo]" id="obj-new0" class="required" ></textarea></td>
                    <td class="porcentaje">
                        <div style="width: 95%; margin: auto;  padding-bottom: 15%; float: left; display: inline;">
                            <div class="slider-porcentaje"  style="width: 60%; display: inline-block;  margin-bottom: -2%; "></div>
                            <input type="text" class="valorPorcentaje" readonly="readonly" name="actividades[0][porcentLogro]" style="width: 16%; display: inline-block; " />
                        </div>
                    </td>
                    <td style="width: 80px;"></td>
                </tr>
            </tbody>
        </table>
        <dl>
            <div>
                <button id="add" class="i_plus icon small" >Agregar Actividad</button>
            </div>

        </dl>
    </fieldset>
    <fieldset>
        <label>Competencias Asociadas Desarrolladas</label>
        <dl>
            <label>Escriba aqu&iacute;</label>
            <div>
                <textarea name="compentencias"></textarea>
            </div>
        </dl>
    </fieldset>
    <button id="SubmitButton" type="submit" class="i_cassette icon" >Enviar Bitacora</button><span class="wl_formstatus"></span>
</form>

<script type="text/javascript">
    
    {literal}
        require(["jquery", "jQuery.ui"], function(jQuery){
            
            function borrar(id){
                $(id).remove();
            }

            jQuery(document).ready(function($){

                var item=0;

                $(function() {
                    var td = $("#fila tr");

                    $.each(td, function(i,e){
                        register_slider(e.id);
                    });

                    $('#add').click(function (){
                        item++;
                        var id = 'new'+item;
                        var campo = '<tr id="' + id + '"><td><textarea style="width: 95%;" name="actividades['+item+'][actividad]" id="act-'+id+'" class="required" ></textarea></td><td><textarea style="width: 95%;" name="actividades['+item+'][objetivo]" id="act-'+id+'" class="required" ></textarea><td class="porcentaje"><div style="width: 95%; margin: auto; padding-bottom: 15%; float: left; display: inline;" ><div class="slider-porcentaje" style="width: 60%; display: inline-block; margin-bottom: -2%; "></div><input type="text" class="valorPorcentaje" readonly="readonly" name="actividades['+item+'][porcentLogro]" style="width: 16%; display: inline-block; " /></div></td><td style="width: 80px;"><a onclick="borrar('+id+')" class="btn small i_trashcan icon" style="float: left; position: relative; margin-bottom: 34%; " >Borrar</a></td></tr>';
                        $("#fila").append(campo);
                        register_slider(id);
                        return false;
                    });
                });


                function register_slider(e){
                    var init_value = 50;
                    var silder_ele = $("#" + e + " .slider-porcentaje");
                    var silder_val = $("#" + e + " .valorPorcentaje");

                    silder_ele.slider({
                        range: "min",
                        value: init_value,
                        min: 0,
                        max: 100,
                        slide: refresh_input,
                        change: refresh_input
                    });

                    silder_val.val(init_value+"%")

                }

                function refresh_input(event, ui){
                    var p_info = $(this).parent("div");
                    p_info.children("input.valorPorcentaje").val(ui.value+"%");
                }

            });
        });
    {/literal}
        
</script>
{/block}